export default {
  data() {
    return {
      // 获取分类列表时候的参数对象
      getListParams: {
        type: 3, // 获取三级分类
        pagenum: 1, // 默认 展示第一页数据
        pagesize: 5 // 默认 每页显示5条数据
      },
      total: 0, // 总数据条数
      cateList: [
        // {
        //   id: 1,
        //   cat_name: '数码',
        //   cat_level: 0,
        //   cat_deleted: 0,
        //   children: [
        //     {
        //       id: 12,
        //       cat_name: '二级分类名称',
        //       cat_level: 1,
        //       children: [
        //         {
        //           id: 13,
        //           cat_name: '三级级分类名称',
        //           cat_level: 2,
        //         },
        //       ]
        //     }
        //   ]
        // },
        // {
        //   id: 2,
        //   cat_name: '日用品',
        //   cat_deleted: 0,
        //   cat_level: 0
        // }, {
        //   id: 3,
        //   cat_name: '日用品',
        //   cat_deleted: 0,
        //   cat_level: 0,
        // }, {
        //   id: 4,
        //   cat_name: '家电',
        //   cat_deleted: 0,
        //   cat_level: 0,
        // }
      ],



      treeCol: [
        {
          label: '分类名称',
          prop: 'name'
        },
        {
          label: '是否有效',
          type: 'template', // 指定当前这一列，是通过作用域插槽渲染出来的
          template: 'isok' // 指定要使用哪个模板，来渲染当前列
        },
        {
          label: '分类图片',
          type: 'template',
          template: 'typeImage'
        },
        {
          label: '排序',
          type: 'template',
          template: 'order'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt',
          width: '200'
        }
      ],
      // 控制添加分类对话框的显示与隐藏
      addDialogVisible: false,
      // 添加分类的表单数据
      addForm: {
        // 要添加的分类，它的父分类id，默认为0
        id: null,
        // 要添加分类的名称
        name: '',
        image:'',
        parentId:null
      },
      // 添加分类的表单验证规则
      addFormRules: {
        cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      },
      // 父级分类的数据
      pcate: [{ value: 1, label: 'hahha', child: [] }],
      // 级联选择器中每一项的对应关系
      cascaderProps: {
        label: 'label', // 展示的名称
        value: 'value', // 选中之后的值
        children: 'child' // 实现父子嵌套的属性
      },
      // 当前选中的父级分类
      selectedParentCate: [],
      // 控制编辑对话框的显示与隐藏
      editDialogVisible: false,
      editForm: {
        image:'',
        id:null,
        disabled:null,
        parentId:null,
        name:''
      },
      // 编辑表单的校验规则
      editFormRules: {
        cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      },

      form: {
        token: '', //七牛token
        Url: '', //获取上传路径
        domain: '' //上传路径 二级
      },
      params: {
        token: '',
        key: ''
      },
    }
  },
  created() {
    this.getCateList();
    this.getQnToken();
  },
  methods: {
    handlePictureCardPreviewNew(file) {
      // this.dialogImageUrl = file.url;
      // this.dialogVisiblePrient = true;
    },
    handleRemoveNew(file, fileList) {
      console.log(file,fileList);
      // const index = this.addForm.pics.findIndex(x => x === file.url)
      // // 根据索引。把 表单中记录的图片信息对象，删除
      // this.addForm.pics.splice(index, 1)
      // console.log(this.addForm.pics);
    },
    beforeUploadNew(file){
      this.params.key =new Date().getTime();// file.name
    },
    //新商城轮播图方法
    uploadSuccessNew(result) {
      let picUrl = this.form.domain + result.key;
      this.addForm.image=picUrl;
      this.getQnToken();
      // const obj = { pic: picUrl }
      // console.log(obj, '上传图片的地址')
      // this.addForm.pics.push(obj)
    },
    edithandlePictureCardPreviewNew(file) {
      // this.dialogImageUrl = file.url;
      // this.dialogVisiblePrient = true;
    },
    edithandleRemoveNew(file, fileList) {
      console.log(file,fileList);
      // const index = this.addForm.pics.findIndex(x => x === file.url)
      // // 根据索引。把 表单中记录的图片信息对象，删除
      // this.addForm.pics.splice(index, 1)
      // console.log(this.addForm.pics);
    },
    editbeforeUploadNew(file){
      this.params.key =new Date().getTime();// file.name
    },
    //新商城轮播图方法
    edituploadSuccessNew(result) {
      let picUrl = this.form.domain + result.key;
      this.editForm.image=picUrl;
      this.getQnToken();
      // const obj = { pic: picUrl }
      // console.log(obj, '上传图片的地址')
      // this.addForm.pics.push(obj)
    },
    async getQnToken() {
      const { data: res } = await this.$http.post('/userFile/qiNiuUpload', {})
      console.log(res.data.token);
      this.form.token = res.data.token;
      this.params.token = res.data.token;
      this.form.domain = res.data.domain;
      this.form.Url = res.data.upload_url;
    },
    // 获取分类列表
    getCateList() {
      this.$http.post("/manage/product/productTypeC", {}).then((res) => {
        // console.log(res)
        if (res.data.status == 1) {
          
          let dataList=[];
          res.data.data.forEach(oneItem=>{
            oneItem.srcList=[oneItem.image]
            let obj1={
              value:oneItem.id,
              label:oneItem.name,
              child:[]
            }
            oneItem.children.forEach(twoItem=>{
              twoItem.srcList=[twoItem.image]
              // let obj2={
              //   value:twoItem.id,
              //   label:twoItem.name
              // }
              // obj1.child.push(obj2);
            })
            dataList.push(obj1);
          })
          console.log(dataList);
          this.pcate=dataList;
          this.cateList=res.data.data;
          console.log(this.cateList);
          // this.userlist = res.data.data.list;
          // this.total = res.data.data.total;

        }
      });

    },
    // 每当 页码值改变，都会触发这个方法
    handleCurrentChange(newPage) {
      this.getListParams.pagenum = newPage
      this.getCateList()
    },
    // 点击展示添加分类的对话框
    async showAddDialog() {
      // 获取所有父级分类的数据
      // const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      // if (res.meta.status !== 200) return this.$message.error('获取父级分类数据失败！')
      // // 把获取到的父级分类，保存到 data 中
      // this.pcate = res.data
      // 显示添加分类的对话框
      this.addDialogVisible = true
    },
    // 每当选中的父级分类变化了，都会触发 handleChange
    handleChange() {
      console.log(this.selectedParentCate);
      if(this.selectedParentCate.length==0){
        this.addForm.parentId=null;
      }else{
        this.addForm.parentId=this.selectedParentCate[this.selectedParentCate.length-1];
      }
      // 设置层级：
      // this.addForm.cat_level = this.selectedParentCate.length
      // // 设置父分类Id：
      // if (this.selectedParentCate.length === 0) {
      //   // 如果没有选中任何父分类， 则 父分类Id为 0
      //   this.addForm.cat_pid = 0
      // } else {
      //   // 如果选中了父分类，则 把数组的最后一项，当作父分类
      //   this.addForm.cat_pid = this.selectedParentCate[this.selectedParentCate.length - 1]
      // }
    },
    // 点击按钮，添加分类
    addCate() {
      if(!this.addForm.name){
        this.$message({
          message: '请输入分类名称',
          type: 'warning'
        });
      }
      console.log(this.addForm);
      this.$http.post("/manage/conf/editProductType", this.addForm).then((res) => {
        // console.log(res)
        if (res.data.status == 1) {
          this.addDialogVisible = false;
          this.$message.success('添加分类成功！')
          this.getCateList();
        }
      });
      // this.$refs.addFormRef.validate(async valid => {
      //   if (!valid) return
      //   const { data: res } = await this.$http.post('categories', this.addForm)
      //   if (res.meta.status !== 201) return this.$message.error('添加分类失败！')
      //   this.$message.success('添加分类成功！')
      //   this.getCateList()
      //   this.addDialogVisible = false
      // })
    },
    // 监听对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
      this.selectedParentCate = []
      // 只要对话框关闭，立即把 所有的数据，重置到原始状态
      this.addForm.cat_level = this.addForm.cat_pid = 0
    },
    // 展示编辑的对话框
    async showEditDialog(row) {
      console.log(row)
        this.editForm.image=row.image;
        this.editForm.id=row.id;
        this.editForm.disabled=row.disabled;
        this.editForm.parentId=row.parentId;
        this.editForm.name=row.name;
      // const { data: res } = await this.$http.get('categories/' + row.cat_id)
      // if (res.meta.status !== 200) return this.$message.error('获取分类信息失败！')
      // // 为编辑的表单赋值
      // this.editForm.id = res.data.cat_id
      // this.editForm.cat_name = res.data.cat_name
      // // 展示编辑的对话框
      this.editDialogVisible = true
    },
    // 重置编辑表单
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
      this.editForm.id = ''
    },
    // 点击按钮，保存对分类信息的修改
    saveCate() {
      if(!this.editForm.name){
        this.$message({
          message: '请输入分类名称',
          type: 'warning'
        });
      }
      console.log(this.addForm);
      this.$http.post("/manage/conf/editProductType", this.editForm).then((res) => {
        // console.log(res)
        if (res.data.status == 1) {
          this.editDialogVisible = false;
          this.$message.success('分类修改成功！')
          this.getCateList();
        }
      });
    },
    // 删除分类
    async remove(row) {
      this.editForm.image=row.image;
        this.editForm.id=row.id;
        this.editForm.disabled=1;
        this.editForm.parentId=row.parentId;
        this.editForm.name=row.name;
      const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }else{
        this.$http.post("/manage/conf/editProductType", this.editForm).then((res) => {
          // console.log(res)
          if (res.data.status == 1) {
            this.$message.success('删除成功')
            this.getCateList();
          }
        });
      }

      // const { data: res } = await this.$http.delete('categories/' + row.cat_id)
      // if (res.meta.status !== 200) return this.$message.error('删除分类失败！')
      // this.$message.success('删除分类成功！')
      // this.getCateList()
    }
  }
}
